<template>
  <div>
    <div class="table_div">
      <div class="head-container">
        <!-- 搜索 -->
        <el-form ref="formSearch" :model="params" :inline="true" size="small">
          <el-form-item label="系统名称" prop="name">
            <el-input
              v-model="params.name"
              clearable
              class="search_width"
              placeholder="支持模糊查询"
            />
          </el-form-item>
          <el-button class="filter-item" size="mini" type="success" icon="el-icon-search" @click="toPageQuery">搜索</el-button>
          <el-button class="filter-item" size="mini" icon="el-icon-close" @click="resetSearchData">重 置</el-button>
        </el-form>
      </div>
    </div>
    <div class="table_div">
      <el-button type="primary" size="small" icon="el-icon-plus" @click="addDetailData">新 增</el-button>
    </div>
    <el-table
      :data="data"
      :height="tableHeight"
      border
      stripe
      highlight-current-row
      style="width: 100%"
      size="small"
    >
      <el-table-column prop="id" label="id" width="100px" align="center"/>
      <el-table-column prop="name" label="系统名称" width="100px" align="center"/>
      <el-table-column prop="appCode" label="项目名称" width="125px" align="center"/>
      <el-table-column prop="url" label="系统路径" width="150px" align="center"/>
      <el-table-column prop="dese" label="系统描述" width="150px" align="center"/>
      <el-table-column label="操作" width="125" align="center">
        <template slot-scope="scope">
          <el-button size="mini" type="primary" icon="el-icon-edit" @click="edit(scope.row)"/>
          <el-popover
            :ref="scope.row.id"
            placement="top"
            width="180">
            <p>确定删除本条数据吗？</p>
            <div style="text-align: right; margin: 0">
              <el-button size="mini" type="text" @click="$refs[scope.row.id].doClose()">取消</el-button>
              <el-button :loading="delLoading" type="primary" size="mini" @click="subDelete(scope.row)">确定</el-button>
            </div>
            <el-button slot="reference" type="danger" icon="el-icon-delete" size="mini"/>
          </el-popover>
        </template>
      </el-table-column>
    </el-table>
    <!--分页组件-->
    <el-pagination
      :total="totalCount"
      :current-page="currentPage + 1"
      style="margin-top: 8px;"
      layout="total, prev, pager, next, sizes"
      @size-change="sizeChange"
      @current-change="pageChange"/>
    <!--表单组件-->
    <eForm ref="form" :is-add="isAdd"/>
  </div>
</template>

<script>
/* eslint-disable */
import initData from '@/mixins/initData'
import eForm from './form'
import { remove } from '@/api/app'
import Config from '@/config'
export default {
  name: "AppList",
  components: { eForm },
  mixins: [initData],
  data() {
    return {
      isAdd: false,
      delLoading: false,
    }
  },
  created() {
    this.setHeight(250); //高度需要调整
    this.$nextTick(() => {
      this.initPageData()
    })
  },
  methods: {
    beforeInit() {
      this.url = 'app/listPage'
      return true
    },
    addDetailData(){
      //新增
      this.isAdd = true
      this.$refs.form.dialog = true
    },
    edit(data) {
      //编辑
      this.isAdd = false
      const _this = this.$refs.form
      _this.form=data
      _this.dialog = true
    },
    subDelete(data) {
      //删除
      this.delLoading = true
      remove(data).then(res => {
        if (res.code == Config.code_200) {
          this.$notify({title: '删除成功',type: 'success'})
        } else {
          this.$notify.error({ title: '失败', message: res.msg })
        }
        this.delLoading = false
        this.$refs[data.id].doClose()
        this.dleChangePage()
        this.initPageData()
      }).catch(err => {
        console.log(err)
        this.delLoading = false
        this.$refs[data.id].doClose()
        console.log(err.response.data.message)
      })
    },
  }
}
</script>

<style scoped>
  .table_div {
    padding: 8px;
    border: 1px solid #ebeef5;
    background-color: #fff;
    color: #303133;
    -webkit-transition: 0.3s;
    transition: 0.3s;
  }
  .pag {
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    padding: 5px 5px 5px 15px;
  }
  .dialog_width {
    width: 620px;
  }
  .search_width {
    width: 160px;
  }
</style >
